<template>
    <el-container style="height: 100vh;">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="sidebar">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/residents">居民信息</el-menu-item>
          <el-menu-item index="/houses">房屋信息</el-menu-item>
          <el-menu-item index="/properties">物业管理</el-menu-item>
          <el-menu-item index="/complaints">投诉建议</el-menu-item>
          <el-menu-item index="/activities">社区活动</el-menu-item>
          <el-menu-item index="/system">系统管理</el-menu-item>
        </el-menu>
      </el-aside>
  
      <!-- 主体内容区域 -->
      <el-main>
        <el-row class="home-content" justify="center" align="middle" style="height: 100%;">
          <el-col :span="12">
            <div class="welcome-card">
              <h2>欢迎来到社区管理系统</h2>
              <p>选择一个模块进行操作</p>
              <el-button type="primary" @click="navigateTo('/residents')" style="width: 200px;">管理居民信息</el-button>
              <el-button type="success" @click="navigateTo('/houses')" style="width: 200px;">管理房屋信息</el-button>
              <el-button type="warning" @click="navigateTo('/properties')" style="width: 200px;">管理物业</el-button>
              <el-button type="info" @click="navigateTo('/complaints')" style="width: 200px;">投诉建议管理</el-button>
              <el-button type="danger" @click="navigateTo('/activities')" style="width: 200px;">社区活动管理</el-button>
              <el-button type="dark" @click="navigateTo('/system')" style="width: 200px;">系统管理</el-button>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElContainer, ElAside, ElMenu, ElMenuItem, ElMain, ElRow, ElCol, ElButton } from 'element-plus';
  
  const activeMenu = ref('/');
  
  const router = useRouter();
  
  // 导航到相应的页面
  const navigateTo = (path) => {
    router.push(path);
  };
  
  const handleSelect = (index) => {
    activeMenu.value = index;
  };
  </script>
  
  <style scoped>
  .home-content {
    height: 100%;
    padding: 20px;
  }
  
  .welcome-card {
    text-align: center;
    background-color: #f5f5f5;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .el-menu-vertical-demo {
    border-right: none;
  }
  
  .el-button {
    margin-top: 20px;
    width: 100%;
  }
  </style>
  